<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/article_model.css"/>
    <link rel="stylesheet"
          href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>水下生物网</title>

</head>
<body>
<div id="mid">
    <!-- 文章内容区域 -->
    <div class="article">
        <h2 class="article-title">与鲸鲨共舞：满载星辉，波澜壮阔 </h2>

        <i style="font-weight: bold; text-align: center; display: block;">自从认识了你，</i>
        <i style="font-weight: bold; text-align: center; display: block;">我才知道，</i>
        <i style="font-weight: bold; text-align: center; display: block;">繁星不止闪烁在夜空，</i>
        <i style="font-weight: bold; text-align: center; display: block;">海洋深处，</i>
        <i style="font-weight: bold; text-align: center; display: block;">也有一抹流动的光辉，</i>
        <i style="font-weight: bold; text-align: center; display: block;">愿灿烂的你，庞大的你，友好的你，</i>
        <i style="font-weight: bold; text-align: center; display: block;">能被世界温柔以待！</i>
        <i style="font-weight: bold; text-align: right; display: block;">——送给鲸鲨</i>

        <img src="../img/artical-img/鲸鲨.png" alt="文章图片" class="article-image">

        <p>一年一度的 世界鲸鲨日（8月30日）即将到来，让我们再次把目光聚焦在这些美丽又脆弱的海洋巨兽身上吧！</p>

        <p>近年来，鲸鲨的数量持续减少，而“濒危状态的鲨鱼处于海洋生物链中的最高层，对保持海洋生态平衡起着关键的作用。如果是鲨鱼这个物种灭绝，食物链下游的物种将没有天敌，无限繁殖，届时 整个海洋系统将遭到灭顶之灾！”国际野生动物环保组织呼吁全人类共同关注鲸鲨现状。 </p>
        <p>作为海洋国家，印尼始终致力于保护鲸鲨，甚至在西巴布亚的 鸟头湾 （Cenderawasih Bay）地区，人们已经形成了和鲸鲨和平共处的友好生态模式 ，随着越来越多的人们关注鲸鲨生存现状，鲸鲨逐年来也得到了越来越多的关注和保护。  </p>
        <p>0世纪初，包括印尼在内的一些国家积极采取行动来保护鲸鲨，马尔代夫在1995年开始禁止猎捕鲸鲨，成为最早针对鲸鲨进行全面保护的国家。随后，印尼、菲律宾、印度、中国等地区也先后 全面禁止了关于鲸鲨的商业活动，纷纷立法对鲸鲨进行保护。  </p>
        <p>进入21世纪，在全球化的推动下，全球更加紧密地携手保护鲸鲨， 全球183个国家共同通过并约定遵守的《濒危野生动植物种国际贸易公约》（公约简称CITES）中， 将鲸鲨加入该公约名录，这意味着，任何围绕鲸鲨的国际贸易行为必须确保不会威胁到该物种的可持续性。</p>

    </div>

    <!-- 新的评论框部分 -->
    <div class="comment-box-section">
        <textarea placeholder="写下你的看法吧~"></textarea>
        <button class="article" id="submitBtn">提交评论</button>
    </div>


    <!-- 评论区 -->
    <div class="comment-section" style="width: 50%; margin: 0 auto;">
        <!-- 这里会动态插入评论或提示 -->
    </div>
</div>
<div class="footer">
    <img src="../img/水下生物网3.0.png" id="logo2">
    <h6><i class="fa fa-phone" aria-hidden="true"></i>&nbsp;技术支持：18375858944</h6>
    <h6><i class="fa fa-phone" aria-hidden="true"></i>&nbsp;专业指导：18375858944</h6>
    <h6><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;邮箱：2065093677@qq.com</h6>
    <h6><i class="fa fa-address-book" aria-hidden="true"></i>&nbsp;地址：南京市玄武区孝陵卫街道南京理工大学</h6>
    <hr/>
</div>
<script src="../js/header.js"></script>
<script type="text/javascript" src="../js/javascript.js"></script>
<script type="text/javascript" src="../js/article_model.js"></script>

<script>
    $(document).ready(function() {

        // 点赞
        const like = (currentBtn) => {
            const commentId = currentBtn.closest('.comment').getAttribute('data-id');

            $.ajax({
                url: "/addLikes/2",
                type: "POST",
                data: {
                    id: commentId,
                },
                success: function(response) {
                    if (response.code !== 200) {
                        if (response.msg === "用户未登录") {
                            logout()
                            // window.location.href = '../login.html'
                        }
                        message.error(response.msg)
                    } else {
                        message.success(response.msg)
                        const likesCount = parseInt(currentBtn.textContent, 10);
                        currentBtn.textContent = 1 + likesCount;
                    }
                },
            })
        }

        // 为新加入点赞按钮绑定监听器
        function bindLikeButtons() {
            // 获取所有的 replyBtn 按钮
            const likeBtns = document.querySelectorAll(".reply-btn");

            // 首先，解绑所有已绑定的事件
            likeBtns.forEach(btn => {
                if (btn._bound) {
                    btn.removeEventListener("click", btn._boundFunction);
                    btn._bound = false;
                }
            });

            // 为每个按钮添加事件监听器
            likeBtns.forEach(btn => {
                if (!btn._bound) { // 检查按钮是否已经绑定事件
                    btn._bound = true; // 标记此按钮已绑定事件

                    const boundFunction = () => {
                        const commentId = btn.closest('.comment').getAttribute('data-id');
                        console.log(commentId);
                        like(btn);
                    };

                    btn._boundFunction = boundFunction; // 保存绑定的函数引用，以便稍后解绑
                    btn.addEventListener("click", boundFunction);
                }
            });
        }


        // 绑定评论按钮的点击事件
        const submitBtn = document.getElementById("submitBtn");
        submitBtn.addEventListener("click", () => {
            // console.log("点击了注册按钮，进行注册");
            submit()
        });

        // 获取所有评论
        fetchComments();

        // 获取所有评论
        function fetchComments() {
            $.ajax({
                url: "/comments/2",
                type: "GET",
                success: function(response) {
                    displayComments(response.data);
                    bindLikeButtons(); // 为新加入的点赞按钮绑定事件监听器
                },
                error: function(error) {
                    console.error("获取评论失败", error);
                }
            });
        }

        // 展示所有评论
        let isInitialized = false; // 标志，表示是否已经初始化过
        let sort_type = "likes";
        function displayComments(comments) {
            const commentSection = $(".comment-section");
            commentSection.empty(); // 清空评论区，避免重复

            console.log(comments)

            if (comments.length === 0) {
                commentSection.html(`
                    <div class="no-comments">
                        <p>还没有评论，发表第一个评论吧</p>
                    </div>
                `);
            } else {
                const tmp_commentDiv =
                    `<div class="comment-sort" style="display:flex; justify-content: space-between; align-items: center;">
                     <div>
                        <span id="comment-count">总评论数：${comments.length}</span>
                     </div>
                     <div>
                       <button id="defaultBtn" class="default-btn" data-sort-type="likes">默认</button>
                       <button id="newestBtn" class="newest-btn" data-sort-type="newest">最新</button>
                    </div>
                </div>`;
                commentSection.append(tmp_commentDiv);
                comments.forEach(comment => {
                    const commentDiv = `
                        <div class="comment" data-id=${comment.id}>
                            <div class="avatar-container"><span class="avatar-content">${comment.name[comment.name.length - 1]}</span></div>
                            <div class="comment-details">
                                <p class="comment-author">${comment.name}</p>
                                <p class="comment-content">${comment.content}</p>
                                <p class="comment-time">${comment.createTime[0]}/${comment.createTime[1]}/${comment.createTime[2]} ${comment.createTime[3]}:${comment.createTime[4]}</p>
                                <div class="reply-container">
                                    <span class="reply-icon">👍</span>
                                    <button class="reply-btn" id="replyBtn-${comment.id}">${comment.likes}</button>
                                </div>
                                <div class="reply-box">
                                    <textarea placeholder="回复${comment.name}..."></textarea>
                                    <button>提交回复</button>
                                </div>
                            </div>
                        </div>
                    `;
                    commentSection.append(commentDiv);
                });

                // 绑定默认和最新按钮
                const defaultBtn = document.getElementById("defaultBtn");
                const newestBtn = document.getElementById("newestBtn");

                function handleBtnClick(event) {
                    if (event.target.classList.contains("active")) {
                        return;
                    }
                    console.log("???");
                    // 移除所有按钮的活动状态
                    defaultBtn.classList.remove("active");
                    newestBtn.classList.remove("active");

                    // 设置点击的按钮为活动状态
                    event.target.classList.add("active");

                    // 获取排序方式
                    const sortType = event.target.getAttribute('data-sort-type');
                    sort_type = sortType;
                    // 发起 AJAX 请求
                    $.ajax({
                        url: "/sortComments/2",
                        type: "POST",
                        data: {
                            sortType: sortType
                        },
                        success: function(response) {
                            displayComments(response.data); // 返回排序后的评论数据
                            bindLikeButtons();
                        },
                        error: function(error) {
                            console.error("排序请求失败", error);
                        }
                    });
                }

                if (!isInitialized) {
                    defaultBtn.classList.add("active");
                    isInitialized = true; // 设置为已初始化
                } else if (sort_type === "likes") {
                    defaultBtn.classList.add("active");
                    newestBtn.classList.remove("active");
                } else if (sort_type === "newest") {
                    defaultBtn.classList.remove("active");
                    newestBtn.classList.add("active");
                }
                defaultBtn.addEventListener("click", handleBtnClick);
                newestBtn.addEventListener("click", handleBtnClick);
            }
        }

        // 添加评论
        const submit = () => {
            const commentContent = $(".comment-box-section textarea").val();
            const userId = sessionStorage.getItem("id");

            if (!userId) {
                alert("评论前请先登录!");
                return; // 直接退出函数
            }

            if (commentContent.trim() !== "") {
                $.ajax({
                    url: "/addComment/2",
                    type: "POST",
                    data: {
                        content: commentContent,
                        userId: userId
                    },
                    success: function() {
                        fetchComments(); // 重新获取评论并显示
                        $(".comment-box-section textarea").val(""); // 清空评论框
                    },
                    error: function(error) {
                        console.error("添加评论错误", error);
                    }
                });
            }
        }


    });
</script>

</body>
</html>
